<template>
    <div class="navigation">
        <ul>
            <li>
                <router-link to="/">
                    <Icon type="ios-home-outline"></Icon>
                    <p>首页</p>
                </router-link>
            </li>
            <li>
                <router-link to="/discover">
                    <Icon type="ios-navigate-outline"></Icon>
                    <p>发现</p>
                </router-link>
            </li>
            <li @click="publishshow = !publishshow">
                <transition>
                    <Icon type="android-add-circle"
                          style=" transition: all .5s;font-size: 50px; color: rgb(253, 163, 62);"
                          :class="{publish:publishshow}"></Icon>
                </transition>
            </li>
            <li>
                <router-link to="/">
                    <Icon type="ios-chatboxes-outline"></Icon>
                    <p>消息</p>
                </router-link>
            </li>
            <li>
                <router-link to="/home">
                    <Icon type="ios-person-outline"></Icon>
                    <p>我的</p>
                </router-link>
            </li>
        </ul>
        <transition name="fade">
            <div v-if="publishshow" class="publishlink">
                <router-link to="addArticle">
                    <img :src="publishImg" alt="">
                    <div class="publishitem">
                        <p>发布文章</p>
                        <p>留存你的成长~</p>
                    </div>
                </router-link>
                <router-link to="addProcess">
                    <img :src="publishImg" alt="">
                    <div class="publishitem">
                        <p>发布轻学习</p>
                        <p>随时随地记录你的特长.</p>
                    </div>
                </router-link>
                <router-link to="">
                    <img :src="publishImg" alt="addProcess">
                    <div class="publishitem">
                        <p>发布动态</p>
                        <p>分享你的生活~</p>
                    </div>
                </router-link>
            </div>
        </transition>
    </div>
</template>

<script>
    import publishImg from './images/publish.png';

    export default {
        name: 'navigation',
        data() {
            return {
                publishImg,
                publishshow: false
            };
        }
    };
</script>

<style lang="scss">
    .navigation {
        position: fixed;
        bottom: 0px;
        height: 55px;
        padding-top: 5px;
        background: white;
        width: 100%;
        ul {
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            li {
                display: block;
                width: 20%;
                a {
                    color: #333;
                    i {
                        font-size: 30px;
                    }
                }
            }
        }
        .publish {
            transform: rotate(-135deg);
        }
        .publishlink {
            position: absolute;
            bottom: 55px;
            height: 340px;
            width: 100%;
            display: block;
            background: whitesmoke;
            a {
                img {
                    width: 50px;
                    height: 50px;
                    margin: 15px;
                }
                display: flex;
                width: 90vw;
                background: white;
                margin: 25px auto;
                height: 80px;
                justify-content: left;
                .publishitem {
                    margin-top: 15px;
                    font-size: 18px;
                    color: black;
                    text-align: left;
                    :last-child {
                        color: #aaaaaa;
                        font-size: 14px;
                    }
                }
            }
        }
    }
</style>
